<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>箭头函数</title>
  </head>
  <body>
    <!-- 
          箭头函数
          传统函数书写：
          function fn(){
              函数体
          }
          语法结构：
          let fn=()=>{

          }
          注意:
          1.在写箭头函数的时候，function关键字绝对不写
          2.函数体中只有一句代码，并且代码的执行结果就是函数的返回值则{}也可以不写 注：如果没有返回值则要写{}
          3.如果形参只有一个,形参外侧的小括号()也可以不写，注:没有形参也要写小括号
          作用：避免很多this指向问题，
          在箭头函数中，没有this指向
          不绑定this关键字，箭头函数中的this指向函数定义位置的上下文的this

          以前看this=>看函数的调用者
          现在看this=>要看函数是否带有function关键字，
            箭头，看定义的位置
            function，看调用的位置
          
        改变this指向
        call apply bind这三者的区别
        call,apply可以自动调用
        bind 需要手动调用
       -->
    <script>
      //   document.addEventListener("click", function () {
      //     console.log(this); //doc
      //     let fn = function () {
      //       console.log(this); //win
      //     };
      //     fn();
      //   });
      document.addEventListener("click", function () {
        console.log(this); //doc
        let fn = function () {
          console.log(this); //win
        };
        // fn.call(this);
        // fn.apply(this);
        fn.bind(this)();
      });
    </script>
  </body>
</html>
